<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net" %>
 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!--riepilogo.jsp--> 
	<script type="text/javascript">
	var data =<c:out value="${listaJson}" escapeXml="false" 	/>;
	

	
	
	$(function() {
		    $('#tabella_corse_attesa td:not(.attivo) .visualizza').live('click',function(event) {
		    	event.preventDefault();
		    	var _id = $(this).attr('id');
		    	var _el = this;
		        	$('#tabella_corse_attesa td .visualizza').html("Visualizza"); //Cambia il testo di tutti i pulsanti
			        $(_el).html("Nascondi"); //Cambia il testo del pulsante cliccato
			        $('#tabella_corse_attesa td').removeClass("attivo"); //Rimuove la classe attivo dai TD
			        $(_el).parent().addClass("attivo"); //Aggiunge la classe attivo al TD

			        // //controllo resize (necessario solo se sono meno di 5 record)
 			        // var altz = $("#attesa_ajax #attesa_info").css('height');
 			        // altz = parseInt(altz);
 			        // if (altz < 240) { 
		          		// $("#attesa_ajax #attesa_info").css('height',187 );  //Inserisce l'html nel box e mette l'altezza come nella tabella vicina
 			        // } else {
 			        	// $("#attesa_ajax #attesa_info").css('height',$("#tabella_corse_recenti tbody").css('height') ); 
 			        // }
					
					
					$("#attesa_ajax #attesa_info").css('height',190 );
					var dialogTopMargin=$(_el).parent().parent().offset().top- $("#tabella_corse_attesa").offset().top-35;

					if(dialogTopMargin+$("#attesa_ajax").height()<=$("#tabella_corse_attesa").height()){
						$("#attesa_ajax").css('margin-top',dialogTopMargin);
					}
					else{
						$("#attesa_ajax").css('margin-top',$("#tabella_corse_attesa").height()-$("#attesa_ajax").height());
					}
				  	
		          	$("#attesa_ajax #attesa_info #tipo_serv_att").html(data[_id].descTipoServizio);
		          	$("#attesa_ajax #attesa_info #data_att").html(data[_id].data);
		          	$("#attesa_ajax #attesa_info #from_att").html(data[_id].pickUp);
		          	$("#attesa_ajax #attesa_info #ora_att").html(data[_id].ore+':'+data[_id].minuti);
		          	$("#attesa_ajax #attesa_info #oraFine_att").html(data[_id].oreFine+':'+data[_id].minutiFine);
		          	
		      });
	  });
	
	   $(document).ready(function () {
		   $("#attesa_ajax #attesa_info").css('height',190 );
	   });
		    
	</script>

			
	<!-- INIZIO CONTENUTO -->
				
				
				<!-- INIZIO SVILUPPO TABELLA IL MIO PROFILO 
				<div id="ilmioprofilo">
					<h3><span>Il mio profilo</span></h3>
					<div id="tabella_mioprofilo">
						<ul id="mioprofilo_menu">
							<img src="<%=request.getContextPath()%>i/avatar.jpg" alt="avatar" width="97" height="97" />
							<li id="foto" class="mioprofilo"><a>Foto</a></li>
							<li id="profilo" class="mioprofilo"><a>Profilo</a></li>
							<li id="info" class="mioprofilo"><a>Info</a></li>
						</ul>
						<table id="tabella">
							<tbody>
								<tr>
									<td class="cella1 cella">Nome: </td>
									<td class="cella2 cella"><c:out value="${dettaglio.nome}"/></td>
									<td class="cella1 cella">Cognome: </td>
									<td class="cella2 cella"><c:out value="${dettaglio.cognome}"/></td>
								</tr>
								<tr class="riga">
									<td class="cella1 cella">Telefono: </td>
									<td class="cella2 cella"><c:out value="${dettaglio.tel}"/></td>
									<td class="cella1 cella">Email: </td>
									<td class="cella2 cella"><c:out value="${dettaglio.email}"/></td>
								</tr>
								<tr>
									<td class="cella1 cella">Registro REA: </td>
									<td class="cella2 cella"><c:out value="${dettaglio.ides.descValoIdes}"/></td>
									<td class="cella1 cella"> </td>
									<td class="cella2 cella"> </td>
								</tr>
								<tr>
									<td class="cella1 cella">Nato a: </td>
									<td class="cella2 cella">Roma</td>
									<td class="cella1 cella">Il: </td>
									<td class="cella2 cella"><c:out value="${dettaglio.dataNasc}"/></td>
								</tr>
								<tr>
									<td class="cella1 cella">Ragione Sociale</td>
									<td class="cella2 cella"><c:out value="${dettaglio.ragiSoci}"/></td>
									<td class="cella1 cella">Citt&agrave;: </td>
									<td class="cella2 cella">Roma</td>
								</tr>
								<tr>
									<td class="cella1 cella last">Targa N&#176;: </td>
									<td class="cella2 cella last">CD553NO</td>
									<td class="cella1 cella last"> </td>
									<td class="cella2 cella last"> </td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<!-- FINE IL MIO PROFILO -->
				
				<!-- INIZIO CORSE RECENTI -->
				<div id="corse_recenti">
					<h3><span>Scambio Corse: Disponibili</span></h3>
					<div id="recenti_ajax">
						<div id="recenti_dettagli"> 
							<p>Dettagli</p>
						</div>
						<div id="recenti_info">
							<p class="titolo_info">Attivit&agrave; <a class="cerca_corse">Cerca corse</a></p>
							<p class="testo_info"><span class="span_1">Cliente: </span><span class="span_2">Mario Rossi</span> </p>
							<p class="testo_info "><span class="span_1">Partenza da: </span>Via del pallovitto Maggiore</p>
							<p class="testo_info orario_info"><span class="span_1">Da ore:</span> 8.00</p><p class="testo_info orario_info"><span class="span_1">A ore: </span> 16.30</p>
							<p class="testo_info"><span class="span_1">Percorso: </span>Piazza Colonna, Piazza di Spagna, Colosseo.</p>
							<p class="testo_info"><span class="span_1">Ritorno a: </span>Via del pallovitto Maggiore</p>
						</div>
						<div id="recenti_storico">
							<a>Vedi tutte le Corse</a>
						</div>
					</div>
					<div id="tabella_corse_recenti">
						<table>
							<thead>
								<th class="menu_tabella_2 first">Tipo Corsa</th>
								<th class="menu_tabella_2">Prezzo</th>
								<th class="menu_tabella_2">Pax</th>
								<th class="menu_tabella_2"> </th>
							</thead>
							<tbody>
								<tr>
									<td class="attivita_2 casella">Transfer Privato</td>
									<td class="casella">90 &euro; </td>
									<td class="casella">4 </td>
									<td class="casella link"><a class="edit" href="#">edit</a><a class="visualizza" href="#">Visualizza</a><a class="help" href="#">info corsa</a></td>
								</tr>
								<tr>
									<td class="attivita_2 casella">Disposizione Oraria</td>
									<td class="casella">320 &euro; </td>
									<td class="casella">2 </td>
									<td class="casella link attivo"><a class="edit" href="#">edit</a><a class="visualizza" href="#">Nascondi</a><a class="help" href="#">info corsa</a></td>
								</tr>
								<tr>
									<td class="attivita_2 casella">Transfer Shuttle</td>
									<td class="casella">60 &euro; </td>
									<td class="casella">6</td>
									<td class="casella link"><a class="edit" href="#">edit</a><a class="visualizza" href="#">Visualizza</a><a class="help" href="#">info corsa</a></td>
								</tr>
								<tr>
									<td class="attivita_2 casella">Transfer Shuttle</td>
									<td class="casella">75 &euro; </td>
									<td class="casella">2 </td>
									<td class="casella link"><a class="edit" href="#">edit</a><a class="visualizza" href="#">Visualizza</a><a class="help" href="#">info corsa</a></td>
								</tr>
								<tr>
									<td class="attivita_2 casella last">Transfer Privato</td>
									<td class="casella last">130 &euro; </td>
									<td class="casella last">1 </td>
									<td class="casella link last"><a class="edit" href="#">edit</a><a class="visualizza" href="#">Visualizza</a><a class="help" href="#">info corsa</a></td>
								</tr>
							</tbody>
							<tfoot>
								<th id="corse_acquisite2">Totale corse acquisite: </th>
								<th id="counter_corse_recenti">7</th>
								<th> </th>
								<th> </th>
							</tfoot>
						</table>
					</div>
				</div>
				<!-- FINE CORSE RECENTI -->
				
				
				
				
				<!-- INIZIO SVILUPPO TABELLA CORSE IN ATTESA -->
				<div id="corse_in_attesa"> 
					<h3><span>La mia Agenda</span></h3>
					<c:if test="${fn:length(listaServizi) > 0}" >
						<div id="attesa_ajax">
							<div id="attesa_dettagli"> 
								<p style='color:black;'>Dettagli</p>
							</div>
							<div id="attesa_info">
								<c:set var="serv" value="${listaServizi[0]}" />
								<p class="titolo_info" style='height:17px;'><span style='color:white;' id="tipo_serv_att" ><c:out value="${serv.descTipoServizio}" /> </span></p>
								<p class="testo_info"><span class="span_1">mancano: </span><span class="span_minuti" id="countdown_att" >12.35 min.</span></p>
								<p class="testo_info"><span class="span_1">Data: </span><span class="span_2" id="data_att"><c:out value="${serv.data}" /></span> </p>
								<p class="testo_info "><span class="span_1">Partenza da: </span> <span id="from_att"><c:out value="${serv.pickUp}" /></span></p>
								<p class="testo_info"><span class="span_1">Orario:</span> <span class="span_2" id="ora_att"><c:out value="${serv.ore}:${serv.minuti}" /></span></p>
								<p class="testo_info"><span class="span_1">Arrivo a: </span><c:out value="${serv.dropOff}" /></p>
								<p class="testo_info"><span class="span_1">Note: </span><c:out value="${serv.note}" /></p>
							</div>
							
							
							
							<div id="attesa_storico">
								<a>Vedi tutte le mie corse</a>
							</div>
						</div>
					</c:if>
					<div id="tabella_corse_attesa">
						
							<c:choose>
								<c:when test="${fn:length(listaServizi) < 1}">
								<div style="width: 950px;
text-align: center;
border: 1px solid #205581;
background: none repeat scroll 0% 0% #031C32;
padding: 10px;
margin-bottom: 20px;">
								
									<strong><span class="span_1">Non hai servizi nelle prossime 72 ore</span></strong>
								</div>
								</c:when>
								<c:otherwise>
								<table>
							<thead>
								<th class="menu_tabella first">Cliente</th>
								<th class="menu_tabella">&euro;</th>
								<th class="menu_tabella">Provenienza</th>
								<th class="menu_tabella"> </th>
							</thead>
							<tbody>
							       <c:forEach var="s" items="${listaServizi}" varStatus="cc">
									     <tr>
											<td class="attivita casella">${s.cliente.descNome}</td>
											<td class="casella"><span class="span_minuti">${s.prezzo}</span> </td>
											<td class="casella"><span class="span_2">${s.sorgente.nome}</span> </td>
											<c:choose>
												<c:when test="${cc.count == 1 }">
												<td class="casella link attivo"><a class="visualizza"  href="#" id="${cc.count-1}" >Nascondi</a><a class="help" href="#">info corsa</a></td>
												</c:when>
												<c:otherwise>
												<td class="casella link "><a class="visualizza"  href="#" id="${cc.count-1}" >Visualizza</a><a class="help" href="#">info corsa</a></td>
												</c:otherwise>
											</c:choose>
										</tr>
							       </c:forEach>
							</tbody>
							<tfoot>
								<th id="corse_acquisite">Totale corse nei prossimi 3 giorni: </th>
								<th id="counter_corse_attesa">${fn:length(listaServizi)}</th>
								<th> </th>
								<th> </th>
							</tfoot>
						</table>
							     </c:otherwise>
							</c:choose>
							
					</div>
				</div>
				<!-- FINE CORSE IN ATTESA -->
				
			</div>
		</div>			